<template>
  <div style="display: flex;">
    <!-- 左侧菜单栏 -->
    <div :style="{width:(isCollapse?'64px':'208px')}">
      <el-menu
          background-color="#3c82f5"
          style="width:100%;height:100vh;"
          text-color="#fff"
          active-text-color="#ff0"
          unique-opened
          router
          :collapse="isCollapse"
          :collapse-transition="false"
      >
        <el-row style="padding-top: 10px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar src="/imgs/admin/logo.png" style="width:35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <span style="color:#fff;font-weight:bold;position:relative;top:8px;left:2px;">人事管理系统</span>
          </el-col>
        </el-row>
        <el-submenu index="1">
          <template #title><span class="el-icon-user-solid"></span><span>用户管理</span></template>
          <el-menu-item index="/my">个人信息</el-menu-item>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-submenu>
        <el-submenu index="2" v-if="user.level>=20">
          <template #title><span class="el-icon-user-solid"></span><span>员工管理</span></template>
          <el-menu-item index="/employee">员工列表</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template #title><span class="el-icon-user-solid"></span><span>考勤管理</span></template>
          <el-menu-item index="/attendance">考勤列表</el-menu-item>
        </el-submenu>
        <el-submenu index="4" v-if="user.level>=20">
          <template #title><span class="el-icon-user-solid"></span><span>薪资管理</span></template>
          <el-menu-item index="/salary">薪资列表</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template #title><span class="el-icon-user-solid"></span><span>绩效管理</span></template>
          <el-menu-item index="/performance">绩效列表</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template #title><span class="el-icon-user-solid"></span><span>招聘管理</span></template>
          <el-menu-item index="/position">招聘列表</el-menu-item>
          <el-menu-item index="/resume">候选人信息</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template #title><span class="el-icon-user-solid"></span><span>培训管理</span></template>
          <el-menu-item index="/training">培训列表</el-menu-item>
          <el-menu-item index="/trainingEmployee">培训人员</el-menu-item>
        </el-submenu>
        <el-submenu index="8">
          <template #title><span class="el-icon-user-solid"></span><span>请假管理</span></template>
          <el-menu-item index="/application">请假申请</el-menu-item>
          <el-menu-item index="/audit">审批请假</el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template #title><span class="el-icon-user-solid"></span><span>部门管理</span></template>
          <el-menu-item index="/department">部门信息</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div :style="{width:(isCollapse?'calc(100% - 64px)':'calc(100% - 208px)')}" style="background-color: #f8f8f8">
      <!-- 右侧顶部条 -->
      <el-header style="padding-top: 22px;height:10vh;background-color:#fff;">
        <el-row :gutter="10">
          <el-col :span="18">
            <span class="el-icon-s-operation" style="font-size: 20px;" @click="changeCollapsed()"></span>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute; right: 20px;">
              <span style="font-size: 19px; font-weight: bold; cursor: pointer;">
                {{ user.name }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="position: relative;top: 20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!-- 右侧主体内容(可变区域) -->
      <el-main style="height:90vh;padding:0;overflow-y: auto;">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      user: this.$getUser(),
      breadcrumb: [],
      map: {
        '/user': ['用户管理', '用户列表'],
        '/device': ['设备管理'],
        '/maintenance': ['设备维修', '维修列表'],
        '/order': ['设备预约'],
        '/rental': ['设备租赁'],
        '/feedbacks': ['反馈列表']
      }
    };
  },
  methods: {
    changeCollapsed() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      console.log('logout')
      localStorage.removeItem('user');
      window.location.href = '/login';
      this.user = '';
    },
    updateBreadcrumb(route) {
      const path = route.path;
      // 从上面的map对象中获取到指定path对应的面包屑数组值,并赋值给breadcrumb
      this.breadcrumb = this.map[path];
    }
  },
  mounted() {
    this.updateBreadcrumb(this.$route);
    this.$router.beforeEach((to, from, next) => {
      this.updateBreadcrumb(to);
      next();
    });
  },
}
</script>
